---
export interface Props {
	title: string;
	data?: string[];
};

const { title, data = [] } = Astro.props as Props;
---

<div class="container bg-gray-200 mx-auto w-full h-full shadow">
  <h2 class="text-center p-4 bg-gray-300 shadow-xl">{ title }</h2>
  {
    data.map((item) => {
      return (
        <div class="relative wrap overflow-hidden px-10 h-full">
          <div class="border-2-2 absolute border-dashed border-blue-500 h-full border" style="left: 5.8%"></div>

          <div class="mb-8 flex justify-between items-center w-full">
            <div class="order-2 w-6/12"></div>
            <div class="z-20">
              <div class="my-4 rounded-full h-10 w-10 flex items-center bg-indigo-300 ring-4 ring-indigo-400 ring-opacity-30">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-600" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
              </div>
            </div>
            <div class="order-1 bg-gray-300 rounded-lg shadow-xl w-full ml-10px px-6">
              <div class="">
                <h3 class="mb-3 font-bold text-gray-800 text-xl" set:html={item}></h3>
              </div>
            </div>
          </div>
        </div>
      );
    })
  }
</div>

